<template>
   <div style="clear:both;">

    <table class="a-table" border="0px"  cellpadding="0" cellspacing="0">
        <tr>
            <th><input type="checkbox" v-model="checked" @change="checkedAll" /></th>
            <th v-for="(filed,key) in fileds">{{filed}}</th>
            <th></th>
        </tr>    
        <tr v-for="item in datas">
            <td><input type="checkbox" v-model="checkList" :value="item['id']" /></td>
            <!-- <td  class="td_content" v-for="(value,key) in item">{{value}}</td> --> <!-- {{key}} -->
            <td v-for="(filed,key) in fileds" >
                <slot v-bind:name="key" v-bind:val="item[key]"> {{item[key]}} </slot> <!-- 这样子就够了，哈哈哈哈  -->
                <!--  v-bind:name 是绑定动态的值  -->
            </td>
            <slot name="options" A="1" B="2" v-bind:data="item"></slot>
            <!--  name="options" 是占位对应的插槽  v-bind:data 作用是把该条参数暴露给父组件用 -->
        </tr>



        <!--  这样才能避免错位 -->

        <!-- 
        <tr class="a-tr">
            <th class="th_header" v-for="(th,index) in clumns" v-text="th.text" v-bind:data-clumn="th.clumn"></th>
        </tr> 
        -->
        <!--  datas[i] 是一个{}  对象  -->      
        <!-- 
        <tr class="a-tr" v-for="i in (datas.length)" >
            <td class="td_content" v-for="(value,key) in (datas[i])"> 
                {{value}}
                <slot name="key"></slot>
            </td>  
        </tr> 
        -->
        

    </table>

    <slot name="text"></slot> <!--  具名插槽   -->

    <span> {{checkList}} </span>

   </div>
</template>

<script>
export default {
    name:'Table',
    props:{
        clumns:{
            type:Array
        },
        datas:{
            type:Array
        },
        fileds:{
            type:Object
        }
    },
    data(){
        return {
            checkList:[],
            checked:false
        }
    },
    mounted(){

    },
    methods:{
        checkedAll(){
            let this_ = this ;    
            if(this.checked){
                this.datas.forEach(function(item,index){
                    if( this_.checkList.indexOf( item['id'] ) == -1 ){
                        this_.checkList.push( item['id'] );
                    }
                });
            }else{
                this.checkList=[];
            }
        }
    }
}
</script>


<style scoped>


.a-table th {
    padding: 10px;
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}

.a-table td{
    padding: 10px;
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}

.a-table{
    width: 80%;
    border-left: 1px solid gainsboro;
    border-top:  1px solid gainsboro;
    padding: 0px;
    font-size: 14px;
}

.a-table tr:nth-child(odd){
    background-color:azure;
}

</style>